<template>
  <div class="loginBg">
    <div class="loginwt autoMain">
        <div class="wt">
            <div class="txtCenter font24 pb20">用户登录</div>
            <div class="ht">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" class="login-ruleForm">
                    <template v-if="onIndex == 0">
                        <el-form-item label="" prop="userName">
                            <el-input placeholder="邮箱 / 手机号码 / 注册ID" v-model="ruleForm.userName"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="userPassword">
                            <el-input placeholder="密码" type="password" v-model="ruleForm.userPassword"></el-input>
                        </el-form-item>
                    </template>
                    <template v-else>
                        <el-form-item label="" prop="userPhone">
                            <el-input placeholder="手机号码" v-model="ruleForm.userPhone"><template slot="prepend">+86</template></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="userCode">
                            <el-input placeholder="短信验证码" v-model="ruleForm.userCode">
                                <template slot="append">
                                    <div v-if="show" @click="getsCode" class="getCodes">获取验证码</div>
                                    <div v-else>{{count}} s</div>
                                </template>
                            </el-input>
                        </el-form-item>
                    </template>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">
                            <template v-if="onIndex == 0">登录</template>
                            <template v-else>立即登录/注册</template>
                        </el-button>
                    </el-form-item>
                    <div class="colorlogo txtCenter font14 pb20">
                        <a @click="onIndex = 1" v-if="onIndex == 0">手机短信登录/注册</a>
                        <a @click="onIndex = 0" v-else>用户名密码登录</a>
                    </div>
                    <div class="txtCenter pb20 font14 color888">
                        <router-link to="/UserRegist">立即注册</router-link><i class="iconfont">&#xe62c;</i><router-link to="/UserRegist">忘记密码</router-link>
                    </div>
                    <div class="flex flexjt loginWay">
                        <a title="qq登录" class="wy color1" href=""><i class="iconfont">&#xe60b;</i></a>
                        <a title="微博登录" class="wy color2" href=""><i class="iconfont">&#xe6b6;</i></a>
                        <a title="支付宝登录" class="wy color3" href=""><i class="iconfont">&#xe63c;</i></a>
                        <a title="微信登录" class="wy color4" href=""><i class="iconfont">&#xe60a;</i></a>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
  data () {
    return {
      onIndex: 0,
      box1Show: false,
      box2Show: false,
      ruleForm: {
        userName: '',
        userPassword: '',
        userPhone: '',
        userCode: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'change' }
        ],
        userPassword: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
        userPhone: [
          { required: true, message: '请输入手机号码', trigger: 'change' }
        ],
        userCode: [
          { required: true, message: '请输入验证码', trigger: 'change' }
        ]
      },
      show: true,
      count: '',
      timer: null
    }
  },
  created () {
  },
  methods: {
    ...mapActions(['login']), // 导入了VueX中提供的数据处理函数
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$jwt.jwt.login(this, this.ruleForm.userName, this.ruleForm.userPassword)
            .then(res => {
              this.login(res) // 保存登录成功后的用户名
              console.log(res)
              if (res.success) {
                this.$message({
                  message: '登录成功',
                  type: 'success'
                })
                this.$router.push('/back/index')
              } else {
                this.$message.error(res.msg)
              }
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getsCode () {
      if (!this.ruleForm.userPhone) {
        return false
      }
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.loginBg{
  height: calc(100vh - 180px);
  padding-top: 40px;
  background: #f5f5f5;
  .loginwt {
    display: flex;
    justify-content: flex-end;
  }
  .wt{
    width: 350px;
    padding:25px 30px;
    background: #fff;
    .el-button{
    display: block;
    padding: 0;
    line-height: 44px;
    border-radius: 0;
    width: 100%;
    margin-top:20px;
  }
}
.ht{
    width: 330px;
    margin: auto;
}
.el-select{
    display: block;
}
}
.qiehuans{
    span{
        cursor: pointer;
        transition: .5s;
        &.on{
            color: #ff6700;
        }
    }
}
.loginWay .wy{
    line-height: 1;
    font-size: 30px;
    margin: 20px;
    &:hover{
        color:#ff6700
    }
}
.getCodes{cursor: pointer;}
.color1{color:#0288d1}
.color2{color:#d32f2f}
.color3{color:#0ae}
.color4{color:#00d20d}
.loginBg /deep/ .el-input__inner{border-radius: 0;}
.loginBg /deep/ .el-form-item__error{padding-top: 0;line-height: 22px;}
.loginBg /deep/ .el-input-group__prepend{border-radius: 0;padding: 0 15px;}
.loginBg /deep/ .el-input-group__append{border-radius: 0;padding: 0 15px;line-height: 38px;}
.loginBg /deep/{
  +footer{display: none;}
}
</style>
